<template>
	<u-navbar title="校园公告" :autoBack="true"
		titleStyle="color:#d1f5f8;margin-left:-65%;margin-top:-0.5%;font-size:30rpx;" leftIconSize="30rpx"
		leftIconColor="#d1f5f8" placeholder bgColor="#01a7f4" height="75rpx" />
	<view class="main">
		<!-- 提示该列表为空内容 -->
		<u-empty mode="list" v-show="notices.length == 0" iconColor="#01a7f4" textColor="#01a7f4" />
		<view class="item" v-for="(item,index) in notices" :key="index" @click="toNoticeDetail(item.noticeId)">
			<up-image :src="item.imgSrc" width="80px" height="80px"></up-image>
			<view class="content">
				<view class="content_title">
					{{item.title}}
				</view>
				<view class="content_time">
					{{item.time}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
	} from "vue";
	import {
		useNoticeStore
	} from "@/stores/noticeStore.js"
	const noticeStore = useNoticeStore();
	const notices = computed(() => {
		return noticeStore.noticeList
	})

	function toNoticeDetail(noticeId) {
		uni.navigateTo({
			url: `/pages/noticeDetail/noticeDetail?noticeId=${noticeId}`
		})
	}
	onMounted(async () => {
		let user = JSON.parse(uni.getStorageSync("user"))
		await noticeStore.getNoticeList(user.schoolId);
	})
</script>

<style lang="scss">
	body {
		background-image: url('/static/images/notice_background.webp');
		background-size: 100vw 100vh;
		width: 100vw;
		height: 100vh;
		background-attachment: fixed;

		.main {




			.item {
				background-color: rgba(255, 255, 255, 0.7);
				width: 93%;

				margin: 0 auto;
				margin-top: 20rpx;

				box-shadow: 20rpx 20rpx 20rpx 20rpx rgba(0, 0, 0, 0.2);
				border-radius: 20rpx;
				display: flex;
				padding: 20rpx;
				align-items: top;


				.content {
					margin-left: 20rpx;

					.content_title {
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 50rpx;
					}

					.content_time {
						font-size: 28rpx;
						color: #4f4f4f;
					}
				}
			}
		}
	}
</style>